import React, {useEffect, useRef} from 'react';
import * as echarts from 'echarts';
import { createChartOption } from '../shared/create-chart-option';
import { px } from '../shared/px';

export const Chart7 = () => {
  const divRef = useRef(null);
  const colors = ['#33a4fa', '#8d70f8', '#F38E1C', '#1CDB7C', '#33A4FA'];
  useEffect(() => {
    var myChart = echarts.init(divRef.current);
    myChart.setOption(createChartOption({
        color: colors,
        xAxis: {show: false},
        yAxis: {show: false},
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['75%', '90%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'inside',
              textStyle: {color: 'white',fontSize: px(20)},
              formatter(options) {
                return (options.value * 100).toFixed(0) + '%'
              }
            },
            labelLine: {show: false},
            itemStyle: {
                borderColor: '#0F113A',
                borderWidth: px(4),
            },
            data: [
              { value: 0.8, name: '男' },
              { value: 0.2, name: '女' },
            ]
          }
        ]
    }))
  }, []);

  return (
    <div className="年龄段-图1">
      <div className="charts">
        <div className="main" ref={divRef} ></div>
        <div className="text">性别</div>
      </div>
      <div className="legend">
        <span className="male" /> 男
        <span className="female" /> 女
      </div>
    </div>
  );
};